<template>
  <div class="kongzhi">
    <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
      筛选<img src="../../assets/img/class/sxct.png" alt="">
    </el-button>

    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :with-header="false"
      size="80%">
      <div class="price">
        <h4>价格（元）</h4>
        <div class="block">
          <el-slider
            v-model="value"
            range
            show-stops
            :max="30000"
            :step="100">
          </el-slider>
        </div>
      </div>
      <div class="size">
        <h4>尺寸（cm）</h4>
        <div class="block">
          <!-- <input type="range" max="200" step="1"> -->
        </div>
      </div>
      
      <h5>颜色</h5>
      <ul class="color">
        <li v-for="v in myStyle" :style="{backgroundColor:v}" @click="showOut">
          <i class="el-icon-check"></i>
        </li>
      </ul>
      <div class="shape">
        <h5>形状</h5>
        <ul>
          <li @click="showBg"><img src="../../assets/img/class/square.png" alt=""></li>
          <li @click="showBg"><img src="../../assets/img/class/tr.png" alt=""></li>
          <li @click="showBg"><img src="../../assets/img/class/cr.png" alt=""></li>
          <li @click="showBg"><img src="../../assets/img/class/xing.png" alt=""></li>
        </ul>
      </div>
      <div class="class">
        <h5>分类</h5>
        <ul>
          <li v-for="v in classes" @click="showBg1" class="cl1">{{v}}</li>
        </ul>
      </div>
      <div class="theme">
        <h5>题材</h5>
        <ul>
          <li v-for="v in themes" @click="showBg2" class="cl2">{{v}}</li>
        </ul>
      </div>
      <div class="style">
        <h5>风格</h5>
        <ul>
          <li v-for="v in styles" @click="showBg3" class="cl3">{{v}}</li>
        </ul>
      </div>
      <div class="space">
        <h5>摆放空间</h5>
        <ul>
          <li v-for="v in spaces" @click="showBg4" class="cl4">{{v}}</li>
        </ul>
      </div>
      <div class="btn">
        <button class="resetBtn">重置</button>
        <button class="conBtn">确定</button>
      </div>
      
    </el-drawer>
  </div>
</template>
<script>
export default{
  name: '',
  data() {
    return {
      drawer: false,
      value: [0,30000],
      myStyle: ['#ff8787','#e8343d','#ff9706','#ffde00','#1bd168','#04d2d3','#14a1e4','#673ab7','#804000','#fff','#000'],
      classes: ['油画','版画','水墨','水彩(粉)','雕塑','摄影','书法','其他'],
      themes: ['风景','人物','静物','动物','花鸟','山水','其他'],
      styles: ['抽象','具象','观念','卡通','传统国画','实验水墨','其他'],
      spaces: ['办公','客厅','书房','餐厅','儿童房','走廊/回廊','卧室','酒店大堂']
    };
  },
  methods: {
    showOut (e) {
      
      if(e.path[0].children[0].style.display == ""){
        e.path[0].children[0].style.display = "block"
        console.log(e.path[0].children[0].style.display)
      }else{
        console.log(e.path[0].children[0].style.display)
        e.path[0].children[0].style.display = ""
      }
    },
    showBg (e) {
      // e.path[0].style.backgroundColor = "#000"
    },
    showBg1 (e) {
      var t = document.getElementsByClassName("cl1")
      for(var i=0;i< t.length;i++){
        t[i].style.backgroundColor = "#fff"
        t[i].style.color = "#000"
      }
      e.path[0].style.backgroundColor = "#000"
      e.path[0].style.color = "#fff"
    },
    showBg2 (e) {
      var t = document.getElementsByClassName("cl2")
      for(var i=0;i< t.length;i++){
        t[i].style.backgroundColor = "#fff"
        t[i].style.color = "#000"
      }
      e.path[0].style.backgroundColor = "#000"
      e.path[0].style.color = "#fff"
    },
    showBg3 (e) {
      var t = document.getElementsByClassName("cl3")
      for(var i=0;i< t.length;i++){
        t[i].style.backgroundColor = "#fff"
        t[i].style.color = "#000"
      }
      e.path[0].style.backgroundColor = "#000"
      e.path[0].style.color = "#fff"
    },
    showBg4 (e) {
      var t = document.getElementsByClassName("cl4")
      for(var i=0;i< t.length;i++){
        t[i].style.backgroundColor = "#fff"
        t[i].style.color = "#000"
      }
      e.path[0].style.backgroundColor = "#000"
      e.path[0].style.color = "#fff"
    }
  }
}
</script>
<style scoped lang="less">
  .kongzhi{
    .el-button{
      background-color: #fff;
      color: #000;
      width: 30px;
      padding: 0;
      border: none;
      img{
        width: 12px;
      }
    }
    h4,h5{
      margin-left: 10px;
    }
    .price{
      .block{
        width: 90%;
        margin: auto;
      }
    }
    .color{
      display: flex;
      flex-wrap: wrap;
      li{
        width: 40px;
        height: 40px;
        border: 1px solid #ddd;
        box-sizing: border-box;
        margin: 10px;
        i{
          color: #fff;
          font-size: 30px;
          margin: 4px;
          display: none;
        }
      }
    }
    .shape{
      ul{
        display: flex;
        flex-wrap: wrap;
        li{
          width: 40px;
          height: 40px;
          margin: 10px;
          img{
            width: 100%;
          }
        }
      }
    }
    .class,.theme,.style,.space{
      ul{
        display: flex;
        flex-wrap: wrap;
        li{
          width: 100px;
          margin: 10px;
          text-align: center;
        }
      }
    }
    .btn{
      width: 100%;
      height: 50px;
      background-color: #0f0;
      display: flex;
      margin: 20px 0;
      button{
        width: 50%;
        height: 100%;
        border: none;
        outline: none;
        font-size: 1.2em;
      }
      .conBtn{
        background-color: #000;
        color: #fff;
      }
    }
  }
  

</style>